<template>
  <div class="register">
    <van-nav-bar title="注册页" left-arrow @click-left="onClickLeft">
    </van-nav-bar>
    <div class="welcome">
      <h1>
        <img src="../assets/img/round.jpg" alt="" />
      </h1>
    </div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="userInfo.phone"
          :rules="[
            {
              required: true,
              trigger: 'onBlur',
              pattern: /^1[3-9]\d{9}$/,
              message: '请输入正确的手机号',
            },
          ]"
          label="手机号"
          placeholder="用于登录和修改密码"
        />
        <van-field
          v-model="userInfo.pwd"
          :rules="[
            {
              required: true,
              trigger: 'onBlur',
              message: '请输入密码',
            },
          ]"
          label="密码"
          placeholder="请设置登录密码"
          type="password"
        />
      </van-cell-group>

      <div class="m-t-10 p-30">
        <van-button round type="danger" block native-type="submit"
          >注册</van-button
        >
      </div>
    </van-form>
    <div class="check-icon" @click="handlechecked">
      <i class="iconfont icon-31xuanzhong" v-if="checked"></i>
      <i class="iconfont icon-yuanxingweixuanzhong" v-else></i>
      <span class="p-l-30" style="font-size: 2.4rem"
        >阅读并接受<a href="" style="font-size: 2.4rem">《用户协议》</a></span
      >
    </div>
    <h2 class="p-t-30 text-center fs-24">
      已注册过，<router-link to="/login" class="fs-24">登录</router-link>
    </h2>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import store from "../store";
import { userReg } from "../api/user.js";

import { Notify, Toast } from "vant"; //引入toast
import "vant/es/toast/style";
import "vant/es/notify/style";
import "vant/lib/index.css"; //引入vant全部的样式
import { useRouter } from "vue-router";

let router = useRouter(); //hook方法
let checked = ref(false);

let userInfo = reactive({
  pwd: "",
  phone: "",
});
let onClickLeft = () => {
  router.push("/category");
};
let onSubmit = () => {
  userReg(userInfo).then((res) => {
    // console.log(res);
    let message = res.data.msg;
    if (!checked.value) {
      Toast.fail("请仔细阅读并勾选用户协议");
      return;
    }
    if (res.data.code == 110) {
      Notify({
        message,
      });
    }
    if (res.data.code == 111) {
      Toast({
        message,
        icon: "success",
      });
      router.back();
    }
  });
};
let handlechecked = () => {
  checked.value = !checked.value;
};
</script>

<style lang="less" scoped>
:deep(.van-nav-bar .van-icon),
:deep(.van-nav-bar__title) {
  color: #a36663;
}
:deep(.van-nav-bar__text) {
  color: #a36663;
}
:deep(.van-button--danger) {
  //注册按钮
  background: #a36663;
  border-color: #a36663;
}
.van-nav-bar,
:deep(.van-cell-group),
:deep(.van-cell) {
  background-color: transparent;
}
:deep(.van-cell) {
  background-color: transparent;
}

body {
  background-color: rgba(255, 255, 255, 0.8);
}
.register {
  background-image: url("../assets/img/background.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 100vh;
}
.welcome {
  padding-top: 10rem;
  text-align: center;
  box-sizing: border-box;
  h1 {
    margin-bottom: 6rem;
    img {
      width: 10rem;
      height: 10rem;
      border-radius: 50%;
    }
  }
  h2 {
    margin-bottom: 3rem;
    font-size: 2.5rem;
  }
}
.check-icon {
  padding-left: 5rem;
  .iconfont {
    color: #a36663;
  }
}
a {
  color: #a36663;
}
</style>
